
let fuc = false;
(function () {
    // 增加样式
    function setStyle (el, strCss) {
        function endsWith (str, suffix) {
            var l = str.length - suffix.length;
            return l >= 0 && str.indexOf(suffix, l) === l;
        }
        var sty = el.style,
            cssText = sty.cssText;
        if (!endsWith(cssText, ';')) {
            cssText += ';';
        }
        sty.cssText = cssText + strCss;
    }
    function extend (a, b) {
        for (var k in b) {
            a[k] = b[k];
        }
        return a;
    };
    function each (obj, cb) {
        var k = obj.length;
        for (var i = 0;i < k;i++) {
            cb(obj[i]);
        }
    };

    function cssget (e, str) {
        return window.getComputedStyle ? window.getComputedStyle(e, null).getPropertyValue(str) : e.currentStyle.getAttribute(str);
    }
    var d = {
        page: '.page-warp',
        start: 0,
        duration: 500,
        loop: false,
        drag: false,
        dir: 'v',
        der: 0.1,
        change: function (data) { },
        beforeChange: function (data) { },
        afterChange: function (data) { },
        orientationchange: function (orientation) { }
    };

    function touchmove (e) {
        e.preventDefault();
    }

    function fix (cur, pagesLength, loop) {
        if (cur < 0) { return 0; }
        if (cur >= pagesLength) { return pagesLength - 1; }
        return cur;
    }

    function move ($ele, dir, dist) {
        var xPx = '0px', yPx = '0px';
        if (dir === 'v') yPx = dist + 'px';
        else xPx = dist + 'px';
        var ts = '-webkit-transform: translate3d(' + xPx + ', ' + yPx + ', 0px);transform: translate3d(' + xPx + ', ' + yPx + ', 0px);';
        setStyle($ele, ts);
    }

    function init (option) {
        var o = extend(d, option);
        var that = this;
        that.curIndex = -1;
        that.o = o;
        that.startY = 0;
        that.movingFlag = false;
        that.$this.classList.add('fullPage-wp');
        that.$parent = that.$this.parentNode;
        that.$pages = that.$this.getElementsByClassName(o.page.slice(1));
        for (var i = 0;i < that.$pages.length;i++) {
            that.$pages[i].classList.add('fullPage-page');
            that.$pages[i].classList.add('fullPage-dir-' + o.dir);
            // setStyle(that.$pages[i], 'fullPage-page fullPage-dir-' + o.dir);
        }

        that.pagesLength = that.$pages.length;
        that.update();
        that.initEvent();
        if (that.o.loop) {
            var f = that.$pages[0];
            that.$this.insertBefore(that.$pages[that.$pages.length - 1].cloneNode(true), f);
            that.$this.appendChild(f.cloneNode(true));
            that.pagesLength += 2;
        }

        // that.start();
    }

    function Fullpage ($this, option) {
        this.$this = $this;
        init.call(this, option);
    }

    Fullpage.prototype = extend(Fullpage.prototype, {
        update: function () {
            var that = this;
            if (this.o.dir === 'h') {
                this.width = parseInt(cssget(this.$parent, 'width'));

                each(this.$pages, function (o) {
                    o.style.width = that.width + 'px';
                });
                this.$this.style.width = (parseFloat(this.width) * (this.pagesLength + 2)) + 'px';
            }

            this.height = parseInt(cssget(this.$parent, 'height'));
            each(this.$pages, function (o) {
                o.style.height = that.height + 'px';
            });
            // this.$pages.height(this.height);

            this.moveTo(this.curIndex < 0 ? (this.o.loop ? this.o.start + 1 : this.o.start) : this.curIndex);
        },
        initEvent: function () {
            var that = this;
            var $this = that.$this;

            $this.addEventListener('touchstart', function (e) {
                that.start();
                if (!that.status) { return 1; }
                // e.preventDefault();
                if (that.movingFlag) {
                    return 0;
                }

                that.startX = e.targetTouches[0].pageX;
                that.startY = e.targetTouches[0].pageY;
            });
            $this.addEventListener('touchend', function (e) {
                if (!that.status) { return 1; }
                e.stopPropagation();
                that.stop();
                if (that.movingFlag) {
                    return 0;
                }

                var sub = that.o.dir === 'v' ? (e.changedTouches[0].pageY - that.startY) / that.height : (e.changedTouches[0].pageX - that.startX) / that.width;
                var der = (sub > that.o.der || sub < -that.o.der) ? sub > 0 ? -1 : 1 : 0;

                that.moveTo(that.curIndex + der, true);
            });
            if (that.o.drag) {
                $this.addEventListener('touchmove', function (e) {
                    if (!that.status) { return 1; }
                    e.preventDefault();
                    if (that.movingFlag) {
                        that.startX = e.targetTouches[0].pageX;
                        that.startY = e.targetTouches[0].pageY;
                        return 0;
                    }

                    var y = e.changedTouches[0].pageY - that.startY;
                    if ((that.curIndex === 0 && y > 0) || (that.curIndex === that.pagesLength - 1 && y < 0)) y /= 2;
                    var x = e.changedTouches[0].pageX - that.startX;
                    if ((that.curIndex === 0 && x > 0) || (that.curIndex === that.pagesLength - 1 && x < 0)) x /= 2;
                    var dist = (that.o.dir === 'v' ? (-that.curIndex * that.height + y) : (-that.curIndex * that.width + x));
                    $this.classList.remove('anim');
                    move($this, that.o.dir, dist);
                });
            }

            // 翻转屏幕提示
            // ==============================
            window.addEventListener('orientationchange', function () {
                if (window.orientation === 180 || window.orientation === 0) {
                    that.o.orientationchange('portrait');
                }
                if (window.orientation === 90 || window.orientation === -90) {
                    that.o.orientationchange('landscape');
                }
            }, false);

            window.addEventListener('resize', function () {
                that.update();
            }, false);
        },

        holdTouch: function () {
            document.addEventListener('touchmove', touchmove, { passive: false });
        },
        unholdTouch: function () {
            document.removeEventListener('touchmove', touchmove);
        },
        start: function () {
            this.status = 1;
            this.holdTouch();
        },
        stop: function () {
            this.status = 0;
            this.unholdTouch();
        },
        moveTo: function (next, anim) {
            var that = this;
            var $this = that.$this;
            var cur = that.curIndex;
            next = fix(next, that.pagesLength, that.o.loop);
            if (anim) {
                $this.classList.add('anim');
            } else {
                $this.classList.remove('anim');
            }

            if (next !== cur) {
                var flag = that.o.beforeChange({
                    next: next,
                    cur: cur
                });

                // beforeChange 显示返回false 可阻止滚屏的发生
                if (flag === false) {
                    return 1;
                }
            }

            that.movingFlag = true;
            that.curIndex = next;
            move($this, that.o.dir, -next * (that.o.dir === 'v' ? that.height : that.width));

            if (next !== cur) {
                that.o.change({
                    prev: cur,
                    cur: next
                });
            }
            window.setTimeout(function () {
                that.movingFlag = false;
                if (that.o.loop) {
                    if (next === (that.pagesLength - 1)) { next = 1;cur = 0; }
                    if (next === 0) { next = that.pagesLength - 2;cur = that.pagesLength - 3; }
                    $this.classList.remove('anim');
                    move($this, that.o.dir, -next * (that.o.dir === 'v' ? that.height : that.width));
                    that.curIndex = next;
                }
                if (next !== cur) {
                    var k = that.o.loop ? next - 1 : next;
                    each(that.$pages, function (o) {
                        o.classList.remove('cur');
                    });
                    that.$pages[k].classList.add('cur');
                    that.o.afterChange({ prev: cur, cur: next });
                }
            }, that.o.duration);

            return 0;
        },
        movePrev: function (anim) {
            this.moveTo(this.curIndex - 1, anim);
        },
        moveNext: function (anim) {
            this.moveTo(this.curIndex + 1, anim);
        },
        getCurIndex: function () {
            return this.curIndex;
        }
    });
    fuc = Fullpage;
}());
export default fuc;

// var f = new mYpage(document.getElementById('wp-inner'), {drag: true, loop: true, dir: 'v', afterChange: function (e) { console.log(e); }});
